{php}
    $CmsMenuList = $dataArr['CmsMenuList']; // 栏目
    $CmsLunboList = $dataArr['CmsLunboList']; // 轮播
    $CmsIsgoodList = $dataArr['CmsIsgoodList']; // 推荐8条
    $CmsZuixinList = $dataArr['CmsZuixinList']; // 最新6条
    $CmsTagList = $dataArr['CmsTagList']; // 全站tag标签

    $pageInfos = $pageInfo; // 页面信息
{/php}
{include file="header" pageInfos="$pageInfos" CmsMenuList="$CmsMenuList" /}
<article class="container-page">
    <div class="layui-row">
        <div class="layui-col-md12 Clear">
            <div class="layui-carousel" id="carousel">
                <div carousel-item>
                    <a ><img src="__static__/img/home/bg1.jpg"></a>
                    <a ><img src="__static__/img/home/bg2.jpg"></a>
                    <!--{ //volist name="$CmsLunboList" id="data"}
                        <a href="/detail/{// $data.id}.html"><img src="{// $data.headimg |default='__static__/img/home/bg1.jpg'}" alt="{// $data.title}"></a>
                    {// /volist}-->
                </div>
            </div>
        </div>
        <!--内容区-->
        <div class="layui-col-md9 Content Clear">
            <div class="layui-tab layui-tab-brief Tabs" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">BestMyself</li>
                    <li>读书</li>
                    <li>读人</li>
                    <li>读物</li>
                    <li>保持热爱</li>
                    <li>保持勇气</li>
                    <li>保持终生学习的能力</li>
                </ul>
                <div>
                    <span class="rightMore" title="更多">
                      <a href="javascript:;"><i></i><i></i><i></i></a>
                    </span>
                </div>
                <div class="layui-tab-content">
                    <!--tabs-->
                    <div class="layui-tab-item layui-show blockBody">
                        {volist name="$CmsIsgoodList" id="data"}
                            <div class="layui-col-md3 Clear">
                                <a href="/detail/{$data.id}.html">
                                    <img src="{$data.headimg |default='__static__/img/noimg.jpg'}" alt="{$data.title}" title="{$data.title}">
                                    <h1 title="item.title">{$data.title}</h1>
                                    <p title="item.easyinfo">{$data.easytitle}</p>
                                    <div><span class="timeType">{$data.newtime}</span><span class="more">+文章阅读</span></div>
                                </a>
                            </div>
                        {/volist}
                    </div>
                    <!--<div class="layui-tab-item">2</div>
                    <div class="layui-tab-item">3</div>
                    <div class="layui-tab-item">4</div>
                    <div class="layui-tab-item">5</div>-->
                    <!--tabs end-->
                </div>
            </div>
        </div>
        <!--大图-->
        <div class="layui-col-md12 Clear xinqu"></div>
        <!--大图 end-->
        <!--最新文章-->
        <div class="layui-col-md9 publicHead newBlog Clear">
            <div class="layui-col-md12 Clear">
                <h2><span>最新文章</span>
                    <span class="rightMore" title="更多">
                          <a><i></i><i></i><i></i></a>
                        </span>
                </h2>
                <div class="listBody">
                    {volist name="$CmsZuixinList['data']" id="data"}
                        <div>
                            <div class="layui-col-md3 Clear left">
                                <a href="/detail/{$data.id}.html">
                                    <img src="{$data.headimg |default='__static__/img/noimg.jpg'}" alt="{$data.title}" title="{$data.title}">
                                </a>
                            </div>
                            <div class="layui-col-md9 Clear right">
                                <a href="/detail/{$data.id}.html">
                                    <h1>{$data.title}</h1>
                                </a>
                                <p>{$data.easytitle}</p>
                                <div class="info">
                                    <span>{$data.onclick}人已围观</span>
                                    <span>{$data.likenum}人赞</span>
                                    <span class="timeType">{$data.newtime}</span>
                                </div>
                                {if ( $data.tagname !== [])}
                                    <div class="tag">
                                        <span>标签:</span>
                                        {volist name="$data['tagname']" id="tag"}
                                            <a href="/tag/{$tag.id}-1.html">{$tag.name}</a>
                                        {/volist}
                                    </div>
                                {/if}
                                <div class="more">
                                    <div>
                                        <span>作者: {$data.writer |default="匿名"}</span>
                                        <span>来源: {$data.befrom |default="转载"}</span>
                                    </div>
                                    <div>
                                        <a href="/detail/{$data.id}.html">
                                            <span class="moreText">+文章阅读</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {/volist}
                </div>
            </div>
        </div>
        <!--热门标签-->
        <div class="layui-col-md9 publicHead tags Clear">
            <div class="layui-col-md12 Clear">
                <h2>
                    <span>热门标签</span>
                    <span class="rightMore" title="更多">
                      <a href=""><i></i><i></i><i></i></a>
                    </span>
                </h2>
                <div class="body">
                    <div class="Tag-row1">
                        {volist name="$CmsTagList" id="tag"}
                            <a href="/tag/{$tag.id}-1.html">{$tag.name}</a>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
        <!--站点信息-->
        <div class="layui-col-md9 publicHead siteInfo Clear">
            <div class="layui-col-md12 Clear">
                <h2>
                    <span>站点信息</span>
                </h2>
                <div class="body">
                    <div>
                        <span><i></i>亮点：前后端完全分离，后台管理采用当前很火的Vue技术实现分离，前端搭配thinkPhp模板引擎完成服务端渲染(利于SEO)，独创评论回复点赞系统。</span>
                        <span><i></i>前端技术(原创博客主页面)：JQ 、layUI库、全站CSS采用Less、部分采用Flex布局。</span>
                        <span><i></i>后端技术(独立Vue后台管理)：原创HuiAdminPro后台管理框架 + iviewUi组件 + VueX。</span>
                        <span><i></i>主程序(服务端)：ThinkPhp5.1 + Apiadmin + 二次开发。</span>
                        <span><i></i>建站时间：<span id="addTime" style="margin-bottom: 0px;">2018-10-24</span>。</span>
                        <span><i></i>云服务器： 阿里云ECS。</span>
                        <span><i></i>勉强运行：<span id="runTime" style="margin-bottom: 0px;">疯狂计算中...</span>。</span>
                        <span><i></i>文章统计：（{$CmsZuixinList['total']}）篇文章。</span>
                        <span><i></i>标签管理： 标签云：{php}$tagCount = count($CmsTagList){/php}{$tagCount}。</span>
                    </div>
                </div>
            </div>
        </div>
        <!--博客之旅-->
        <div class="layui-col-md9 publicHead blogRouter Clear">
            <div class="layui-col-md12 Clear">
                <h2>
                    <span>博客之旅</span>
                </h2>
                <div class="body Border">
                    <div>
                        <ul class="layui-timeline">
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2017年上旬</h3>
                                    <span>第一次接触个人博客 “杨青个人博客”，被博客界面设计和内容深深吸引，突然感觉对博客很有兴趣，当时就想我什么时候也可以做一个专属自己的博客。</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2017年中旬</h3>
                                    <span>开发里程碑版本1.0(未发布已成压缩包)，采用开源ASPCMS开发了第一个个人博客，界面采用的是杨青博客免费模板。</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2017年下旬</h3>
                                    <span>开发版本2.0(未发布已成压缩包)，弃用ASPCMS采用帝国CMS7.2开发，界面采用的是杨青博客免费模板，也是人生中第一次接触PHP。</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2018年10月24</h3>
                                    <span>发布里程碑版本1.0，采用帝国CMS7.5开发，界面采用的是杨青博客今夕何夕模板。第一次接触阿里云服务器，博客发布遇到很多坑，百度了很多问题。</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2019年3月</h3>
                                    <span>发布版本2.0，延用帝国CMS7.5，前端界面未做大的修改，后端帝国cms界面采用LAYUI全面改版，同时开发了微信小程序版，同样遇到很多坑。</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2019年6月5号</h3>
                                    <span>发布颠覆版本3.0，弃用帝国CMS 改用ThinkPHP5.0 + 开源Apiadmin(基础框架)，重新设计博客界面，采用VUE + NUXT.JS服务端渲染，Flex布局，Less,iviewUI库等等。（个人ECS配置低，SSR效果太差）</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2019年6月7号</h3>
                                    <span>发布前缘起点版本3.0，弃用ThinkPHP5.0（主要原因: 没研究出全站静态咋整），续用帝国CMS，采用部分LayUi框架重新制作博客界面，大部分采用Flex布局，Less。(LayUi框架完全不是flex布局)</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2019年8月18号</h3>
                                    <span>利用双休日两天完成整个博客的响应式多设备兼容，目前已测完美兼容：大屏台式、笔记本电脑、iPad、iPhoneX、iPhone7Plus、iPhone6-8、安卓设备、支持横竖屏切换.</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <h3 class="layui-timeline-title">2019年12月08号</h3>
                                    <span>发布博客全新4.0版本，继续弃用帝国CMS，采用ThinkPHP5.1+apiAdmin4.0+二次开发，前后端完全分离，后台管理采用当前很火的Vue技术，搭配原创HuiAdminPro框架，前端采用thinkPhp模板引擎完成服务端渲染(利于SEO)</span>
                                </div>
                            </li>
                            <li class="layui-timeline-item">
                                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                <div class="layui-timeline-content layui-text">
                                    <div class="layui-timeline-title">今朝，待续...</div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!--友情链接-->
        <div class="layui-col-md9 publicHead lickUrl Clear">
            <div class="layui-col-md12 Clear">
                <h2>
                    <span>站点信息</span>
                </h2>
                <div class="body bodyBorder">
                    <div class="url-row">
                        <a>虚位以待</a><a>曾小晖博客</a><a>曾小晖博客</a><a>曾小晖博客</a>
                    </div>
                </div>
            </div>
        </div>
        <!--内容区 end-->
    </div>
</article>

{include file="footer" /}